<template>
	<view class="container">
		<view class="status-bar"></view>
		<view class="container-top">
			<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/back.png" mode="widthFix" class="top-img" @click="back" />
			<view class="search">
				<u-search v-model="keyword" placeholder="请输入搜索内容" @search="inputConfirm" :showAction="false"></u-search>
			</view>
		</view>
		<my-tab :list="list1" bgColor="#fff" :current="currentIndex" @itemClick='itemClick'></my-tab>
		<scroll-view scroll-y class="scroll" @scrolltolower="loadMore">
			<view class="order-items" v-if="orderlist.length>0">
				<view class="order-item" v-for="(item,index) in orderlist" :key="index" @click="jump(item,index)">
					<view class="top">
						<view class="left">
							<view class="logo-left">
								<image :src="store_info.wap_login_logo" mode="widthFix" />
								<text>{{store_info.store_title}}</text>
							</view>
						</view>
						<view class="right">{{item.status_text}}</view>
					</view>
					<view class="order-goods-rows">
						<view class="order-goods-row-item" v-for="(itm,gindex) in item.order_goods" :key="gindex">
							<image :src="itm.goods_img" mode="widthFix" class="goods-img"></image>
							<view class="right">
								<view class="goods-name">{{itm.goods_name}}</view>
								<view class="goods-spec" v-if="itm.item_name">已选：{{itm.item_name}}</view>
								<view class="right-bot">
									<view class="price">
										<text>￥</text>
										<text class="large">{{itm.goods_price}}</text>
									</view>
									<view class="num">x{{itm.goods_num}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="total">
						<text class="black">共{{item.goods_all_num}}件商品，应付:</text>
						<text>￥</text>
						<text class="large">{{item.order_amount}}</text>
					</view>
					<view class="order-bot">
						<button size="mini" v-if="item.order_status!=-1">查看订单</button>
						<block v-if="item.order_status==-1">
							<button size="mini" @tap.stop='cancel(item)'>取消订单</button>
							<button size="mini" class="confirm" @tap.stop="payment(item)">立即支付</button>
						</block>
						<block v-if="item.order_status==3">
							<button size="mini" @tap.stop='buy_again(item.order_id,index)'>再次购买</button>
						</block>
						<button size="mini" class="confirm" @tap.stop="openConfirm(item)"
							v-if='item.order_status == 2'>确认收货</button>
					</view>
				</view>
				<u-loadmore :status="hasMore?'loading':'nomore'" />
			</view>
			<view class="empty-container" v-else>
				<u-empty text="暂无相关订单" :icon="emptyIcon">
					<button @tap='goIndex' size="mini" class="chooseBtn">去逛逛</button>
				</u-empty>
			</view>
		</scroll-view>
		<u-popup :safeAreaInsetBottom="false" :safeAreaInsetTop="false" mode="center" :show="show" round="10"
			:overlay="true" :customStyle="customStyle1" @close="show=false">
			<view class="u-popup-slot">
				<text class="u-popup-slot_text">确认收货？</text>
				<view class="u-popup-slot_flex">
					<button @click="show = !show" class="cancel">取消</button>
					<button @click="Confirm()" class="confirm">确认</button>
				</view>
			</view>
		</u-popup>
		<u-popup :safeAreaInsetBottom="false" :safeAreaInsetTop="false" mode="center" :show="cancel_show" round="10"
			:overlay="true" :customStyle="customStyle1" @close="cancel_show=false">
			<view class="u-popup-slot">
				<text class="u-popup-slot_text">确认取消？</text>
				<view class="u-popup-slot_flex">
					<button @click="cancel_show = !cancel_show" class="cancel">取消</button>
					<button @click="CancleOrder()" class="confirm">确认</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		payment
	} from '@/common/helper.js'
	var _this;
	export default {
		data() {
			return {
				list1: [{
					name: '全部',
				}, {
					name: '待支付',
				}, {
					name: '待发货'
				}, {
					name: '待收货'
				}, {
					name: '已完成'
				}],
				customStyle1: {
					'width': '80%'
				},
				cancel_show: false,
				show: false,
				emptyIcon: 'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/empty.png',
				goodslist: [],
				orderlist: [],
				page: 1,
				order_id: 0,
				currentIndex: 0,
				hasMore: true,
				keyword: '',
				store_info: '',
				temp_item: {}
			}
		},
		onLoad(option) {
			_this = this
			if (option.status != undefined) {
				this.currentIndex = option.status
			}
			uni.$on('doOrder', res => {
				if (res.type == 1) {
					_this.orderlist[res.index]['order_status'] = -2
					_this.orderlist[res.index]['status_text'] = '已取消'
				} else if (res.type == 2) {
					_this.orderlist[res.index]['order_status'] = 3
					_this.orderlist[res.index]['status_text'] = '已完成'
				} else {
					_this.orderlist[res.index]['order_status'] = 1
					_this.orderlist[res.index]['status_text'] = '待发货'
				}
			})
			this.orderList();
			this.officialConfig()
		},
		onUnload() {
			uni.$off('doOrder')
		},
		//触底事件
		onReachBottom() {},
		methods: {
			loadMore() {
				if (this.hasMore) {
					this.page++
					this.orderList()
				}
			},
			back() {
				uni.navigateBack()
			},
			//点击取消按钮
			cancel(item) {
				this.temp_item = item
				this.cancel_show = true
			},
			itemClick(index) {
				this.currentIndex = index
				this.page = 1
				this.orderlist = []
				this.orderList()
			},
			inputConfirm(e) {
				_this.keyword = e
				this.page = 1
				this.orderlist = []
				this.orderList()
			},
			//获取订单列表
			async orderList() {
				var params = {
					pageIndex: this.page,
					pageSize: 20,
					status: this.currentIndex,
					keyword: this.keyword,
				}
				const data = await _this.$post('api/OrderList', params)
				if (data.code == 200) {
					_this.store_info = data.data.store_info
					this.orderlist.push(...data.data.order)
					this.hasMore = data.data.order.length >= 20
				} else {
					this.hasMore = false
				}
			},
			// 跳转到个人信息页面
			centerto() {
				this.$u.route({
					url: "pages/center/center",
					type: "reLaunch"
				})
			},
			//跳转到评价
			pingjito() {
				this.$u.route({
					url: "pages/center/order/evaluate",
					type: "reLaunch"
				})
			},
			//路由跳转
			jump(item, index) {
				uni.navigateTo({
					url: `/pages/order/order-detail?id=${item.order_id}&index=${index}`
				})
			},
			// 支付
			async payment(item) {
				let form = {
					order_id: item.order_id,
					is_zhifu: 1,
				}
				const data = await _this.$post('api/OrderDetail', form)
				if (data.code == 50) {
					//唤起支付
					uni.requestPayment({
						provider: data.data.pay_code,
						orderInfo: data.data.result,
						success(res) {
							_this.$u.toast('支付成功')
							item.order_status = 1
							item.status_text = '待发货'
						},
						fail(err) {
							_this.$u.toast('支付失败')
							console.log('fail:' + JSON.stringify(err));
						}
					});
				} else if (data.code == 60) {
					try {
						await payment(data)

						_this.$u.toast('支付成功')
						item.order_status = 1
						item.status_text = '待发货'
					} catch (e) {
						console.info({
							e
						})
						_this.$u.toast('支付失败')
					}
				} else {
					uni.$u.toast(data.msg)
				}
			},
			openConfirm(item) {
				this.temp_item = item
				this.show = true
			},
			//取消订单
			async CancleOrder() {
				const params = {
					id: this.temp_item.order_id
				}
				//发送请求
				const data = await _this.$post('api/CancelOrder', params)
				if (data.code == 200) {
					uni.$u.toast(data.msg)
					_this.temp_item['order_status'] = -2
					_this.temp_item['status_text'] = '已取消'
					this.cancel_show = false
				} else {
					uni.$u.toast(data.msg)
				}
			},
			//确认收货
			async Confirm() {
				const params = {
					id: this.temp_item.order_id,
				}
				//发送请求
				const data = await _this.$post('api/OrderConfirm', params)
				if (data.code == 200) {
					_this.temp_item['order_status'] = 3
					_this.temp_item['status_text'] = '已完成'
					uni.$u.toast(data.msg)
					this.show = false
				} else {
					uni.$u.toast(data.msg)
				}
			},
			//再次购买
			buy_again(order_id) {
				//跳转到确认订单页面
				this.$u.route({
					url: 'pages/order/order-confirm',
					params: {
						action: 'buy_again',
						order_id
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import "@/static/css/order.scss";

	.container {
		padding: 0;
		height: 100%;

		.status-bar {
			background: #fff;
		}

		.container-top {
			background: #fff;
			height: 44px;
			padding: 0 30rpx;
			display: flex;
			align-items: center;

			.top-img {
				width: 26rpx;
				margin-right: 10rpx;
			}

			.search {
				flex: 1;
				display: flex;
				align-items: center;
				height: 56rpx;
				border-radius: 30rpx;
			}
		}

		.scroll {
			height: calc(100% - 44px - 80rpx);

			.order-items {
				padding: 20rpx 30rpx 0 30rpx;

				.order-item {}
			}
		}
	}
</style>